<!doctype html>
<html lang="en">
<head>
    <title>wijsuperpanel - overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
    <style type="text/css">
        .elements ul
        {
            padding: 8px 0 0 8px;
            margin: 0px;
            width: 750px;
            float: left;
            position: relative;
            zoom: 1;
        }
        
        .elements ul li
        {
            background: #fff;
            color: #fff;
            font-weight: 900;
            margin: 0 8px 8px 0;
            padding: 0;
            position: relative;
            text-align: center;
            text-shadow: 1px 1px 2px #000000;
        }
        
        .elements li:nth-child(odd) { height: 50px; }
        .elements li:nth-child(even) { height: 80px; }
                
        .elements li
        {
            list-style: none;
        }
    </style>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var created = false;
            var currentIdx = 0;
            $('#superPanel').wijsuperpanel({
                hScroller: { scrollBarVisibility: "hidden" },
                scrolling: function (event, data) {
                    var top,
                    idx = data.direction == "top" ? --currentIdx : ++currentIdx,
                    li = $(this).find("li").eq(idx),
                    ulTop;
                    if (li.length) {
                        ulTop = li.parent("ul").offset().top;
                        top = li.offset().top - ulTop;
                        data.customScroll = top;
                    }
                }
            });
        });

        function changeProperties() {
            var animationOptions = {
                queue: $('#chkQueue').is(":checked"),
                easing: $('#selEasing').val()
            };
            $('#superPanel').wijsuperpanel({ animationOptions: animationOptions });
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="superPanel" style="width: 754px; height: 300px;">
                <div class="elements">
                    <ul>
                        <li style="background: none repeat scroll 0% 0% activeborder;"><span>ActiveBorder</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% appworkspace;"><span>AppWorkspace</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% buttonface;"><span>Control</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% buttonshadow;"><span>ControlDark</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% threeddarkshadow;"><span>ControlDarkDark</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% buttonface;"><span>ControlLight</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% buttonhighlight;"><span>ControlLightLight</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% buttontext;"><span>ControlText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% background;"><span>Desktop</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% graytext;"><span>GrayText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% highlight;"><span>Highlight</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% highlighttext;"><span>HighlightText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% highlight;"><span>HotTrack</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% inactiveborder;"><span>InactiveBorder</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% inactivecaption;"><span>InactiveCaption</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% inactivecaptiontext;"><span>InactiveCaptionText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% infobackground;"><span>Info</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% infotext;"><span>InfoText</span>
                        </li>
                        <li style="background: none repeat scroll 0% 0% menu;"><span>Menu</span> </li>
                        <li style="background: none repeat scroll 0% 0% menutext;"><span>MenuText</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div>
                    <label for="chkQueue">
                        Animation Settings: Queue
                    </label>
                    <input id="chkQueue" type="checkbox" />
                    <label for="selEasing">
                        Easing
                    </label>
                    <select id="selEasing">
                        <option value="easeInQuad">easeInQuad</option>
                        <option value="easeOutQuad">easeOutQuad</option>
                        <option value="easeInOutQuad">easeInOutQuad</option>
                        <option value="easeInCubic">easeInCubic</option>
                        <option value="easeOutCubic">easeOutCubic</option>
                        <option value="easeInOutCubic">easeInOutCubic</option>
                        <option value="easeInQuart">easeInQuart</option>
                        <option value="easeOutQuart">easeOutQuart</option>
                        <option value="easeInOutQuart">easeInOutQuart</option>
                        <option value="easeInQuint">easeInQuint</option>
                        <option value="easeOutQuint">easeOutQuint</option>
                        <option value="easeInOutQuint">easeInOutQuint</option>
                        <option value="easeInSine">easeInSine</option>
                        <option value="easeOutSine">easeOutSine</option>
                        <option value="easeInOutSine">easeInOutSine</option>
                        <option value="easeInExpo">easeInExpo</option>
                        <option value="easeOutExpo">easeOutExpo</option>
                        <option value="easeInOutExpo">easeInOutExpo</option>
                        <option value="easeInCirc">easeInCirc</option>
                        <option value="easeOutCirc">easeOutCirc</option>
                        <option value="easeInOutCirc">easeInOutCirc</option>
                        <option value="easeInElastic">easeInElastic</option>
                        <option value="easeOutElastic">easeOutElastic</option>
                        <option value="easeInOutElastic">easeInOutElastic</option>
                        <option value="easeInBack">easeInBack</option>
                        <option value="easeOutBack">easeOutBack</option>
                        <option value="easeInOutBack">easeInOutBack</option>
                        <option value="easeInBounce">easeInBounce</option>
                        <option value="easeOutBounce">easeOutBounce</option>
                        <option value="easeInOutBounce">easeInOutBounce</option>
                    </select>
                    <input type="button" value="Apply" onclick="changeProperties()" />
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                This sample demonstrates the wijsuperpanel widget, which allows you to easily scroll
                overflowed elements. In this sample, <b>animationOptions</b>
            are used to set the animation seen as the panel is scrolled.
        </div>
    </div>
</body>
</html>
